<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <a href="/admin/setting/rolePermission/add" class="layui-btn layui-btn-normal">新增角色</a>
        <div class="layui-row">
            <div class="layui-col-xs8">
                <table class="layui-hide" id="role" lay-filter="role"></table>
            </div>
            <div class="layui-col-xs4">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>拥有的权限</legend>
                </fieldset>
                <div class="layui-col-xs11  layui-col-md-offset1">
                    <div id="permission" class="demo-tree"></div>
                </div>
            </div>
        </div>
        <script type="text/html" id="roleBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
    </div>
</div>
</body>
<script src="/lib/layui-v2.5.4/layui.js" charset="utf-8"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    layui.use(['table', 'tree', 'util', 'jquery'], function () {
        var table = layui.table,
            tree = layui.tree,
            layer = layui.layer,
            util = layui.util,
            $ = layui.jquery;
        // 表格
        table.render({
            elem: '#role',
            url: '/api/admin/setting/rolePermission/list',
            page: false,
            cols: [
                [
                    {field: 'id', title: 'ID', align: 'center', hide: true},
                    {field: 'name', title: '角色', align: 'center'},
                    {field: 'note', title: '描述', align: 'center'},
                    {fixed: 'right', title: '操作', toolbar: '#roleBar', align: 'center'}
                ]
            ]
        });
        //监听工具条
        table.on('tool(role)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'edit') { //编辑
                window.location = "/admin/setting/rolePermission/edit?id=" + data.id;
            } else if (layEvent === 'del') { //删除
            layer.confirm('真的删除该角色吗?', function (index) {
                //向服务端发送删除指令
                var param = {
                    "id": data.id
                }
                $.ajax({
                    url: "/api/admin/setting/rolePermission/confirm/delete/" + data.id,
                    type: "DELETE",
                    data: param,
                    success: function (rst) {
                        layer.msg(rst.msg);
                        if (rst.code === '1') {
                            setTimeout(function () {
                                location.href = "/admin/setting/rolePermission/list";
                            }, 2000);
                        }
                    }
                });
                layer.close(index);
            });
        }
        });
        //监听行单击事件（单击事件为：rowDouble）
        table.on('row(role)', function (obj) {
            var data = obj.data;
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            $.ajax({
                url: "/api/admin/setting/rolePermission/viewPermission",
                type: "get",
                data: {
                    "id": data.id
                },
                success: function (rst) {
                    tree.render({
                        elem: '#permission',
                        data: rst
                    });
                }
            });
        });
    });
    /*]]>*/
</script>
</html>